<template>
  <div class="edit_dialog">
    <!--标题栏-->
    <div class="tabs">
      <div class="tabs_list">
        <div class="tabs_btn" :class="linkAdd" @click="linkAddFun">链接添加</div>
      </div>
    </div>
    <!--链接添加-->
    <div v-show="isLinkAddActive" class="linkAddContent">
      <span>URL：</span>
      <input type="text" class="imgUrl" v-model="url">
      <button class="datermineBtn" @click="resolve($event)">确定</button>
    </div>
    <!--空参提示-->
    <div class="alert_modal" v-if="showAlert">
      <div class="alert">
        <div class="title">提示</div>
        <div class="btns">
          <div class="close" @click="closeAlert">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" style="width: 20px;height: 20px">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
            </svg>
          </div>
        </div>
        <div class="content">{{ msg }}</div>
      </div>
    </div>
    <div class="close" @click="config.reject()">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>
    </div>
  </div>
</template>

<script>
  import modalTemplate from './common/modalTemplate';

  export default modalTemplate({
    data: () => ({
      linkAdd: 'active',
      url: '',
      isLinkAddActive: true,
      showAlert: false,
      msg: '',
    }),
    computed: {},
    methods: {
      linkAddFun() {
        this.uploadImage = '';
        this.linkAdd = 'active';
        this.isLinkAddActive = true;
      },
      closeAlert() {
        this.showAlert = false;
      },
      resolve(evt) {
        evt.preventDefault();
        if (this.url === '') {
          this.msg = '参数不能为空';
          this.showAlert = true;
        } else {
          const { callback } = this.config;
          this.config.resolve();
          callback(this.url);
          // 关闭文件上传窗口
          this.config.reject();
        }
      },
    },
  });
</script>

<style scoped>
  .edit_dialog {
    width: calc(70vw);
    height: calc(40vw);
    border-radius: 5px;
    margin: 50px auto 0;
    background: #fff;
    position: relative;
    box-shadow: 0 6px 40px 0 rgba(0, 0, 0, 0.25);
  }

  .active {
    background: #ddd;
    border-bottom: 2px solid #eee;
  }

  .tabs {
    height: 60px;
    padding: 10px;
    margin: 0;
    border: none;
    font-family: "Microsoft Himalaya", serif;
    font-weight: bold;
    font-size: 16px;
    color: #666;
    border-bottom: 1px solid #ccc;
  }

  .tabs_list {
    overflow: hidden;
  }

  .tabs_btn {
    float: left;
    width: 100px;
    height: 40px;
    border-radius: 3px;
    line-height: 46px;
    text-align: center;
    border: 1px solid #ddd;
  }

  .tabs_btn:hover {
    background: #efefef;
    cursor: pointer;
  }

  .linkAddContent {
    width: 480px;
    height: 40px;
    line-height: 40px;
    margin: 150px auto 0;
  }

  .linkAddContent > span {
    float: left;
  }

  .imgUrl {
    float: left;
    width: 300px;
    height: 38px;
    border: 1px solid #ddd;
    outline: none;
  }

  .datermineBtn {
    float: left;
    width: 80px;
    height: 38px;
    background-color: #e4393c;
    color: #fff;
    border: none;
    margin-left: 10px;
    border-radius: 10px;
    cursor: pointer;
  }

  .close {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 28px;
    height: 28px;
  }

  .close:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .close .icon {
    width: 28px;
    height: 28px;
    cursor: pointer;
  }

  .alert_modal {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(160, 160, 160, 0.2);
    overflow: auto;
  }

  .alert {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  .alert .title {
    position: absolute;
    width: 300px;
    height: 30px;
    top: 10px;
    padding-left: 10px;
    border-bottom: 1px solid #ddd;
  }

  .alert .content {
    width: 300px;
    height: 150px;
    line-height: 150px;
    margin-top: 30px;
    text-align: center;
  }
</style>
